<template>
  <div style="margin-bottom: 100px;">
    <div style="margin: 20px 0; font-size: 20px; color: #1e90ff">考试列表</div>
    <div style="border: 1px solid #ccc;  border-radius: 10px; padding: 10px; margin: 10px 0" v-for="item in tableData"
         :key="item.id">
      <div style="color: #333; padding: 10px; font-size: 20px">{{ item.name }}</div>
      <div style="color: #666; margin: 10px 0">
        <span>{{ item.room }}</span>
        <span style="margin-left: 20px">{{ item.time }}</span>
        <span style="margin-left: 20px">监考老师： {{ item.teacher }}</span>
        <span style="margin-left: 20px">考试状态： {{ item.state }}</span>
      </div>
      <div style="margin: 10px 0">
        <el-button style="margin-left: 20px" type="primary" @click="sign(item.id)">报名</el-button>
        <el-button style="margin-left: 10px" type="primary" @click="doPaper(item.id)"
                   v-if="item.enable && item.state === '进行中'">考试考试
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Exam",
  data() {
    return {
      tableData: [],
      courses: [],
      name: "",
      pageNum: 1,
      pageSize: 10,
      total: 0,
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},

    }
  },
  created() {
    this.load();
  },
  methods: {
    // 考试试卷
    doPaper(examId){
      this.$router.push('/front/paper?examId=' + examId)
      this.request.get("/examPaper/exam/" + examId).then(res => {
        if (res.data) {
        }else {
          this.$message.error("考试尚未出卷，请联系考官");
        }
      })
    },
    // 报名
    sign(examId) {
      let form = {userId: this.user.id, examId: examId}
      this.request.post("/sign", form).then((res) => {
        if (res.code === '200') {
          this.$message.success("报名成功");
          this.load();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    load() {
      //加载2条数据
      this.request.get("/exam/page/front", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          name: this.name,
        },
      }).then((res) => {
        console.log(res);
        this.tableData = res.data.records;
        this.total = res.data.total;
      });

      this.request.get("/coursePlus").then(res => {
        console.log('courses', res)
        this.courses = res.data
      })
    },
  }
}
</script>

<style scoped>

</style>